<template>
	<div>
		<ul class="module-attr-tab">
			<li v-for="(item, index) in tab" :key="index" :class="cur === index ? 'on' : ''" @click="cur = index">{{ item.name }}</li>
		</ul>
		<!--基础设置-->
		<template v-if="cur == 0">
			<div class="attr-con-item">元件设置</div>
			<div class="att-con-box">
				<div class="attr-form-ht">
					表单类型 
					<el-select v-model="curIndex">
						<el-option v-for="(item, index) in attr.columns" :key="index" :label="item.name" :value="index"></el-option>
					</el-select>
					<el-button type="primary" @click="addItem">添加</el-button>
				</div>
				<div class="attr-nav-item" v-for="(item, index) in attr.list" :key="index">
					<div class="ht">
						<div class="t" :class="item.o ? 'on' : ''" @click="item.o = item.o ? false : true">
							{{item.label}}
							<span class="el-icon-arrow-down"></span>
						</div>
						<div class="opt">
							<el-button type="primary" v-if="index != 0" @click="up(attr.list, index)" icon="el-icon-arrow-up" circle></el-button>
							<el-button type="primary" v-if="index != attr.list.length - 1" @click="down(attr.list, index)" icon="el-icon-arrow-down" circle></el-button>
							<el-button type="danger" @click="attr.list.splice(index, 1)" icon="el-icon-delete" circle></el-button>
						</div>
					</div>
					<transition name="down">
						<div class="hm" v-if="item.o">
							<div class="form-attr-itm">
								<span class="s1">标题名称</span>
								<input type="text" class="intxt" v-model="item.label">
							</div>
							<div class="form-attr-itm">
								<span class="s1">是否禁用</span>
								<el-checkbox v-model="item.disabled" />
							</div>
							<div class="form-attr-itm">
								<span class="s1">是否必填</span>
								<el-checkbox v-model="item.required" />
							</div>
							<div class="form-attr-itm" v-if="item.type=='text'||item.type=='textarea'">
								<span class="s1">最大字符</span>
								<input type="number" class="intxt" v-model="item.maxlength">
							</div>	
							<div class="form-attr-itm" v-if="item.type=='select'||item.type=='radio'">
								<span class="s1">表单选项</span>
								<div class="option">
									<div class="option-item" v-for="(a,i) in item.items" :key="i">
										<input type="text" placeholder="选项名称" v-model="a.label" class="intxt">
										<input type="text" placeholder="选项值" v-model="a.value" class="intxt">
										<a href="javascript:void(0)" @click="formdelse(item, item.items, i)">删除</a>
									</div>
									<div class="option-item"> <a href="javascript:void(0)" style="color:#409EFF" @click="item.items.push({label:'',value:''})">添加</a></div>
								</div>
							</div>
							<div class="form-attr-itm" v-if="item.type=='checkbox'">
								<span class="s1">表单选项</span>
								<div class="option">
									<div class="option-item" v-for="(a,i) in item.items" :key="i">
										<input type="text" placeholder="选项值" v-model="a.label" class="intxt">
										<a href="javascript:void(0)" @click="formdelck(item, item.items, i)">删除</a>
									</div>
									<div class="option-item"> <a href="javascript:void(0)" style="color:#409EFF" @click="item.items.push({label:''})">添加</a></div>
								</div>
							</div>		
						</div>
					</transition>
				</div>
			</div>
		</template>
		<!--样式设置-->
		<template v-if="cur == 1">
			<div class="att-con-box">
				<div class="att-con-pd">
					<AttrText :text="attr.title" />
					<div class="item" v-for="(item,index) in attr.btn" :key="index">
						<div class="tit" style="margin-top:5px;">按钮{{index+1}}：</div>
						<div class="input">
							<div class="form-attr-itm"><input type="text" v-model="item.text" placeholder="按钮文字" maxlength="100" class="intxt"><input type="checkbox" v-model="item.hide" class="checkbox"> 隐藏</div>
							<div class="form-attr-itm"><span class="s1">背景颜色</span> <el-tooltip effect="dark" content="颜色" placement="top"><colorPicker v-model="item.bgcolor" defaultColor="#333" /></el-tooltip></div>
							<div class="form-attr-itm"><span class="s1">边框颜色</span> <el-tooltip effect="dark" content="颜色" placement="top"><colorPicker v-model="item.bdcolor" defaultColor="#333" /></el-tooltip></div>
							<div class="form-attr-itm"><span class="s1">文字颜色</span> <el-tooltip effect="dark" content="颜色" placement="top"><colorPicker v-model="item.color" defaultColor="#333" /></el-tooltip></div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import AttrText from '@/views/attr/text.vue';
import AttrImg from '@/views/attr/img.vue';
import AttrLink from '@/views/attr/link.vue';
import AttrBase from '@/views/attr/base.vue';
export default {
	name: 'AttrTuwen',
	props: ['attr'],
	components: { AttrText, AttrImg, AttrLink, AttrBase },
	data() {
		return {
			tab: [{ name: '基础设置', content: '' }, { name: '样式设置', content: '' }],
			cur: 0,
			curIndex:'',
		};
	},

	mounted() {
		if(this.attr.list.length==0){
			this.attr.list = JSON.parse(JSON.stringify(this.attr.columns))
			this.setFormValue()
		}else{
			this.setFormValue()
		}
	},

	methods: {	

		//回显值
		setFormValue(){
			this.attr.list.forEach(res=>{
				 res.prop = res.value
			})
		},

		//添加项
		addItem() {
			if(this.curIndex===''){ this.$message.error("请选择表单类型"); return; }
			let item = JSON.parse(JSON.stringify(this.attr.columns[this.curIndex]));
			item.prop = "";
			this.attr.list.push(item)
			console.log(this.attr.list)
		},

		//上移
		up(arr, index) {
			arr.splice(index - 1, 0, arr[index]);
			arr.splice(index + 1, 1);
		},

		//下移
		down(arr, index) {
			arr.splice(index + 2, 0, arr[index]);
			arr.splice(index, 1);
		},

		//删除选项
		formdelse(pitem, items,i){
			items.splice(i,1);
			pitem.value = ""
		},

		//删除多选框
		formdelck(pitem, items,i){
			items.splice(i,1);
			pitem.value = []
		},

	}
};
</script>

<style></style>
